<template>
	<navbarVue />
	<scroll-view scroll-y class="scroll">
		<Tswiper :bannerData="bannerData" />
		<listVue :listData="listData" />
		<hotPanelVue :hotData="hotData" />
		<TgoodsList />
	</scroll-view>
</template>

<script setup lang="ts">
	import navbarVue from './components/navbar.vue';
	import listVue from './components/list.vue';
	import hotPanelVue from './components/hotPanel.vue';
	import type {
		BannerItem, CategoryItem, HotItem
	} from '@/types/home'
	import {
		getHomeSwiper, categoryMutli, hotMutli
	} from '@/services/home'
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	// 首页轮播图
	const bannerData = ref<BannerItem[]>([])
	const getBannerData = async () => {
		const res = await getHomeSwiper()
		bannerData.value = res.result
	}
	//首页分类数据
	const listData = ref<CategoryItem[]>([])
	const getListData = async () => {
		const res = await categoryMutli()
		listData.value = res.result
	}
	//首页热门推荐
	const hotData = ref<HotItem[]>([])
	const getHotData = async () => {
		const res = await hotMutli()
		console.log(res);
		hotData.value = res.result
	}

	onLoad(() => {
		getBannerData()
		getListData()
		getHotData()
	})
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.scroll {
		overflow-y: auto;
	}
</style>